iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
  • json 全名JavaScript Object Notation,其檔案主要是用來儲存資料,相較於XML有著更精簡、易讀、輕量、容易修改、更多樣的格式、支援多種程式語言等等的優點。

    • 實際應用的地方有例如:使用者在瀏覽器上面點擊商品後,JS會透過AJAX將資料傳送給伺服器端,伺服器端收到產品ID會將產品資料編成JSON檔案,回傳給瀏覽器,JS收到JSON檔案之後,將資料解碼後顯示在網站上面供使用者瀏覽。
    • 以下是JSON檔案的基本使用的code
    {
      "name": "John Doe",
      "age": 30,
      "email": "john@example.com"
    }
    

    把以上輸入到json檔案內,之後再用js或者其他能讀取的語言去抓data。

    <div id="data-container">
    <p><strong>姓名:</strong><span id="name"></span></p>
    <p><strong>年齡:</strong><span id="age"></span></p>
    <p><strong>Email:</strong><span id="email"></span></p>
    </div>
    <script>
    // 使用 JavaScript 來讀取並顯示 JSON 資料
    fetch('data.json')
      .then(response => response.json())
      .then(data => {
        document.getElementById('name').textContent = data.name;
        document.getElementById('age').textContent = data.age;
        document.getElementById('email').textContent = data.email;
      })
      .catch(error => console.error('讀取 JSON 檔案時發生錯誤:', error));
    </script>
    

    上述為html檔案,把以上兩個檔案丟到同一個資料夾後,打開即可成功抓取。https://ithelp.ithome.com.tw/upload/images/20230912/20162170J3UrA4l8GG.png


上一篇
Day_10 JavaScript入門教學
下一篇
Day_12 CSS 入門教學
系列文
三十天持續努力挑戰py30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言